<template>
	<view class="container" >
		<view class="item" v-for="(item, index) in lists" :key="index">
			<view class="item-tit">
				<view class="icon">				
				</view>
				{{item.title}}
			</view>
			<view class="item-content">
				<view class="child" v-for="(child, idx) in item.children" :key="idx" @click="goOtherPage(child.url)">
					<image :src="child.icon" mode="aspectFit"></image>
					<text>{{child.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lists from './allNav.js';
	export default {
		data() {
			return {
				lists: lists
			}
		},
		methods: {
			goOtherPage(url) {
				if(url == '/other/scale') {
					uni.scanCode({
					    onlyFromCamera: true,
					    success: (res) => {
							if(res.scanType == 'QR_CODE' && res.result && this.checkURL(res.result)) {
								uni.setStorageSync('scaleUrl', res.result)
								uni.navigateTo({
									url
								})
							}else{
								uni.showToast({
									title: '该码不符合规则',
									icon: 'none'
								})
							}
					    }
					});
				}else{
					uni.navigateTo({
						url
					})
				}
			},
			checkURL(URL) {
				const str=URL;
				const Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
				const objExp=new RegExp(Expression);
				if(objExp.test(str)==true){
					return true;
				}else{
					return false;
				}
			} 

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 30rpx 24rpx;
		background: #F5F5F5;
		box-sizing: border-box;
	}
	.item{
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 36rpx 20rpx;
		margin-bottom: 14rpx;
	}
	.item-tit{
		display: flex;
		align-items: center;
		color: #000000;
		font-size: 28rpx;
		font-weight: bold;
		.icon{
			height: 35rpx;
			width: 6rpx;
			background-color: #177fff;
			margin-right: 15rpx;
			border-radius: 3rpx;
		}
	}
	.item-content{
		display: flex;
		flex-wrap: wrap;
		color: #666666;
		font-size: 24rpx;
		padding: 0 20rpx;
	}
	.child{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 38rpx;
	}
	.child image{
		width: 52rpx;
		height: 48rpx;
		margin-bottom: 14rpx;
	}
</style>
